// Dropimage plugin
// Allow to upload images in a sensible manner


// Variables

// The ratio for the images (responsive by default)
$picnic-dropimage-ratio: 16 / 9 !default;

// The percentage of height (respect of width)
$picnic-dropimage-height: percentage(1 / $picnic-dropimage-ratio) !default;

$picnic-dropimage-background-color: #ddd !default;

// This comes from camera.svg. Converted with:
// http://dopiaza.org/tools/datauri/index.php
$picnic-dropimage-background-image: '' !default;

$picnic-dropimage-radius: $picnic-button-radius !default;
$picnic-dropimage-margin: $picnic-button-margin !default;


// Styles
// It is preferred to only use one top-level class or element
// It can be combined with other, specific classes with &.another
%dropimage {

  @extend %button;


  position: relative;
  display: block;
  padding: 0;
  // Hack from http://stackoverflow.com/a/13976732/938236
  padding-bottom: $picnic-dropimage-height;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  margin: $picnic-dropimage-margin;
  border-radius: $picnic-dropimage-radius;

  background-color: $picnic-dropimage-background-color;
  background-size: cover;
  background-position: center center;
  background-image: url(#{$picnic-dropimage-background-image});

  // Subelements
  input {
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    position: absolute;
  }
}
